<template>
  <div>
    <div style="height:70px"></div>
    <div align="center" style="font-size: 18px;">
      <div align="left" style="width:600px;height:1000px;border:1px solid">
        用户名：{{user.cust_username}}
        <br />
        手机号码：{{user.phone_number}}
        <br />
        <a-button type="primary" @click="openModifyInfoWin">修改信息</a-button>&nbsp;
        <a-button type="primary" @click="openModifyPasswordWin">修改密码</a-button>
      </div>
    </div>
    <div>
      <a-modal v-model:visible="visible" title="修改个人信息" @ok="handleOk">
        手机号码：<a-input v-model:value="newPhone_number" placeholder="请输入手机号码"/>
      </a-modal>
    </div>
    <div>
      <a-modal v-model:visible="visible2" title="修改密码" @ok="modifyPassword">
        原密码：<a-input-password v-model:value="oldPassword" placeholder="请输入原密码"/>
        新密码：<a-input-password v-model:value="newPassword" placeholder="请输入新密码"/>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { message } from 'ant-design-vue';
import { get, post, tip } from "@/common";

const router = useRouter();
const route = useRoute();
const newPhone_number = ref("");
const oldPassword = ref("");
const newPassword = ref("");

const user = ref({});
const getUserList = () => {
  get("/user/info").then(res => {
    user.value = res.data;
    newPhone_number.value = user.value.phone_number;
    console.log(user.value);
  });
};

getUserList();

const modifyInfo = () => {};

const visible = ref(false);
const visible2 = ref(false);

const openModifyInfoWin = () => {
  visible.value = true;
};

const openModifyPasswordWin = () => {
  visible2.value = true;
};

const handleOk = () => {
  visible.value = false;
  post("/user/info/modify-info", {phone_number:newPhone_number.value}).then(res => {
      tip.success("修改信息成功！")
      getUserList();
  });
};

const modifyPassword = () => {
  visible2.value = false;
  post("/user/info/modify-password", {oldPassword:oldPassword.value, newPassword:newPassword.value}).then(res => {
      message.info(res.message);
  });
};
</script>

<style>
</style>